<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
			border: 1px solid #ccc;
		}
		.el-tabs {
			background: #fff;
			height: 100%;
			border: 1px solid #ccc;
			padding-top: 20px;
		}
		.el-tabs__header {
			padding-left: 20px;
		}
		.table {
			border: 1px solid #ccc;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}
		.searchbox {
			text-align: right;
			margin-bottom: 10px;
		}
		.el-table__row img {
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}
		.pagenation {
			text-align: center;
			margin-top: 10px;
		}
	</style>
</block>
<block name="content">
	<el-tabs v-model="activetab" type="card">
		<el-tab-pane label="全部项目" name="first">
			<div class="searchbox">
				<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeParam" v-model="param.key">
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<div class="table">
				<el-table :data="tableData" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}">

					<el-table-column prop="headimg" label="头像">
						<template slot-scope="scope"><img :src="scope.row.headimg" alt=""></template>
					</el-table-column>
					<el-table-column prop="company_ak" label="公司简称"></el-table-column>
					<el-table-column prop="name" label="审核员"></el-table-column>
					<el-table-column prop="store_count" label="门店数量"></el-table-column>
					<el-table-column prop="city" label="城市"></el-table-column>
					<el-table-column prop="charger" label="项目负责人"></el-table-column>
					<el-table-column prop="stauts" label="状态">
						<template slot-scope="scope">
							<span v-if="scope.row.status == '1'">启用</span>
							<span v-if="scope.row.status == '0'">禁用</span>
						</template>
					</el-table-column>
					<el-table-column prop="option" label="操作">
						<template slot-scope="scope">
							<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toDetail(scope.row.id)">查看</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
							   @current-change="handleCurrentChange" :page-size="param.size" :total="total"></el-pagination>
			</div>
		</el-tab-pane>
	</el-tabs>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    tableData: [
                        {
                            avaimg: "img/logo.png",
                            company: "慕斯深圳",
                            checker: "李强",
                            shopnum: "13",
                            city: "广东-深圳",
                            charger: "陈列",
                            stauts: "活跃",
                            option: "查看"
                        },
                        {
                            avaimg: "img/logo.png",
                            company: "深圳盘古",
                            checker: "李强",
                            shopnum: "31",
                            city: "广东-深圳",
                            charger: "陈列",
                            stauts: "活跃",
                            option: "查看"
                        },
                    ],
                    activetab: "first",
                    param: {
                        key: '',
                        page: 1,
                        size: 10
                    },
                    total: 0,
                }
            },
            created: function () {
                this.getData();
            },
            methods: {
                getData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Audit/getData', _this.param, function (data) {
                        if(data.status){
                            _this.total = parseInt(data.data.count);
                            _this.tableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleSizeChange: function (size) {
                    this.param.size = size;
                    this.getData();
                },
                handleCurrentChange: function (page) {
                    this.param.page = page;
                    this.getData();
                },
                changeParam: function () {
                    this.param.page = 1;
                    this.getData();
                },
                toDetail(id) {
                    window.location.href = HOME_URL+"/orderAdmin/audit/shopinfo?id=" + id;
                },
            }
        });
	</script>
</block>